<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./style.css" rel="stylesheet">y
  <title>50.新拟物卡片悬停特效</title>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="imgBx">
        <img src="design.png" alt="">
      </div>
      <div class="contentBx">
        <h2>设计</h2>
        <p>任何时候，无论你面临着生命的何等困惑，抑或经受着多少挫折，无论道路如何的艰难，无论希望变得如何渺茫，请你不要绝望，再试一次，成功一定属于你!</p>
        <a href="#"><span>Read More</span></a>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="code.png" alt="">
      </div>
      <div class="contentBx">
        <h2>编码</h2>
        <p>任何时候，无论你面临着生命的何等困惑，抑或经受着多少挫折，无论道路如何的艰难，无论希望变得如何渺茫，请你不要绝望，再试一次，成功一定属于你!</p>
        <a href="#"><span>Read More</span></a>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="launch.png" alt="">
      </div>
      <div class="contentBx">
        <h2>成长</h2>
        <p>任何时候，无论你面临着生命的何等困惑，抑或经受着多少挫折，无论道路如何的艰难，无论希望变得如何渺茫，请你不要绝望，再试一次，成功一定属于你!</p>
        <a href="#"><span>Read More</span></a>
      </div>
    </div>
  </div>
</body>
</html>